<template lang="pug">
  el-drawer.commonDrawer(
    title="添加文件夹"
    :visible.sync="visibleDialog"
    custom-class="commonDrawer"
    direction="rtl"
    size="640px"
    append-to-body
    destroy-on-close
    modal-append-to-body
  )
    .drawer-content
      form-box(
        ref="basicForm"
        :fields="basicFormFields"
        :showBtns="false"
        labelWidth="126px"
        :layoutCol="{ sm: 24, md: 24, lg: 24 }"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" round @click="submitHandle" :loading="submitting") 确定
</template>
<script>
import { mapGetters } from 'vuex'
import { addDir } from '../api'

export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      default: 'add',
      type: String
    },
    id: {
      type: [String, Number],
      default: ''
    },
    info: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      loading: false,
      submitting: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    basicFormFields () {
      const { info } = this
      return [
        {
          key: 'title',
          label: '文件夹名称',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info?.title
        },
        {
          key: 'cover',
          label: '文件夹封面',
          type: 'upload',
          fieldProps: {
            help: '如不上传，默认系统封面',
            helpStyle: 'c_error',
            // listType: 'picture-card',
            imgFlag: true,
            limit: 1,
            accept: 'image/*',
            'show-file-list': false
          },
          initialValue: info?.cover ? [{ url: info?.cover, name: info?.title, type: info?.type }] : []
        }
      ]
    }
  },
  methods: {
    async submitHandle () {
      const { curArea, id } = this
      const values = await this.$refs.basicForm.submitForm()
      this.submitting = true
      const params = {
        id: id || null,
        areaId: curArea.areaId,
        type: 0, ...values,
        cover: values.cover && values.cover[0] ? values.cover[0].url : '' }
      addDir(params).then(() => {
        this.$message.success('提交成功')
        this.$emit('getList', { pageNum: 0 })
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  padding: 0 24px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}
</style>
